<template>
	<view class="work-container">
		<view class="tab_box">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item, index) in navList" :key="index">
					<view :class="{ 'active': isActive === index }" @click="checked(index)">
						{{ item.title }}
					</view>
				</view>
			</view>
			<view @click="showDiv()">
				<uni-icons class="icon-search" type="search" size="20"></uni-icons>
			</view>
		</view>

		<view :hidden="userFeedbackHidden" class="popup_content" @touchmove.stop.prevent="stopRoll">
			<uni-forms ref="form" :modelValue="formRecog" label-width="32%">
				<uni-forms-item :label="$t('search:device')">
					<view @click="handleDevicesOpen" class="sbBox">
						{{ nodeListCopy }}
					</view>
				</uni-forms-item>
				<uni-forms-item :label="$t('control:surveillanceName')">
					<input type="text" class="popup_textarea" value="" v-model="formRecog.monitorName"
						:placeholder="$t('control:enterSurveillanceName')" />
				</uni-forms-item>
				<uni-forms-item :label="$t('search:faceLibrary')" v-if="isActive == 0">
					<uni-data-picker :placeholder="$t('search:pleaseSelect')" :popup-title="$t('search:pleaseSelect')"
						:localdata="dataTree" v-model="formRecog.groupIds" @change="changeGroupIds" :map="treeChild">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('warn:vehicleLibrary')" v-if="isActive == 1">
					<uni-data-picker :placeholder="$t('search:pleaseSelect')" :popup-title="$t('search:pleaseSelect')"
						:localdata="vehicleDataTree" v-model="formRecog.groupIds" @change="changeGroupIds"
						:map="treeChild">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('control:surveillanceType')" v-if="isActive == 0">
					<uni-data-picker :placeholder="$t('search:pleaseSelect')" :popup-title="$t('search:pleaseSelect')"
						:localdata="faceControlTypeList" v-model="formRecog.monitorTypes"
						@nodeclick="changeControlType">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('control:surveillanceType')" v-if="isActive == 1">
					<uni-data-picker :placeholder="$t('search:pleaseSelect')" :popup-title="$t('search:pleaseSelect')"
						:localdata="vehicleControlTypeList" v-model="formRecog.monitorTypes"
						@nodeclick="changeControlType">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item :label="$t('control:surveillanceStatus')">
					<uni-data-picker :placeholder="$t('search:pleaseSelect')" :popup-title="$t('search:pleaseSelect')"
						:localdata="controlStatusList" v-model="formRecog.monitorStatus"
						@nodeclick="changeControlStatus">
					</uni-data-picker>
				</uni-forms-item>
			</uni-forms>
			<view class="btn">
				<button type="primary" class="popup_button" @click="submitFeedback()">{{ $t('warn:search') }}</button>
				<button type="primary" class="popup_button" @click="clearFeedback()">{{ $t('warn:reset') }}</button>
			</view>
		</view>
		<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		<view class="nav_item" v-if="isActive == 0">
			<view v-for="item in dataList" @click="gotoPage(0, item)">
				<bklb-item :item="item" @changeStatus='getPages'></bklb-item>
			</view>
		</view>
		<view class="nav_item" v-if="isActive == 1">
			<view v-for="item in dataList" @click="gotoPage(1, item)">
				<clbk-item :item="item" @changeStatus='getPages'></clbk-item>
			</view>
		</view>
		<view class="btnAdd" @click="Add(isActive)">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</view>

		<devicesTree ref='devicesTree' @onOk="setDevides" />
	</view>
</template>

<script>
import {
	DBFace,
	DBVehicle
} from "@/api/rljc.js"
import bklbItem from './components/bklbItem.vue'
import clbkItem from './components/clbkItem.vue'
import devicesTree from '@/components/devicesTree/devicesTree.vue'
import {
	getControl,
} from '@/api/warning/index.js'
import {
	getFace,
	getCar,
} from '@/api/control/index.js'

export default {
	components: {
		bklbItem,
		clbkItem,
		devicesTree
	},
	data() {
		return {
			isActive: 0,
			navList: [
				{ index: 0, title: this.$t('control:faceSurveillance') },
				{ index: 1, title: this.$t('control:vehicleSurveillance') }
			],
			pageIndex: 1,
			pageSize: 10,
			dataList: [],
			total: '',

			userFeedbackHidden: true, //默认隐藏
			// 人像库list
			dataTree: [],
			// 车辆库list
			vehicleDataTree: [],
			//人脸查询条件
			formRecog: {
				monitorName: '',
				devicesTree: [],
				nodeList: [],
				groupIds: [],
				monitorTypes: '',
				monitorStatus: '',
			},
			nodeListCopy: this.$t('search:pleaseSelect'),
			// 人像库
			treeChild: {
				text: "name",
				value: "id",
			},
			// 人脸布控类型
			faceControlTypeList: [
				{ text: this.$t('control:imageSurveillance'), value: "6" },
				{ text: this.$t('control:blacklist'), value: "1" },
				{ text: this.$t('control:stranger'), value: "2" }
			],
			// 车辆布控类型
			vehicleControlTypeList: [
				{ text: this.$t('control:vehicleLibrarySurveillance'), value: "7" },
				{ text: this.$t('control:singlePlateSurveillance'), value: "9" }
			],
			// 布控状态
			controlStatusList: [
				{ text: this.$t('control:enable'), value: 1 },
				{ text: this.$t('control:disable'), value: 2 },
				{ text: this.$t('control:surveillanceExpiry'), value: 3 },
				{ text: this.$t('control:deleted'), value: 4 }
			],
		}
	},
	created() {
		this.getPages(0)
	},
	onShow() {
		// this.faceDB()
		// this.vehicleDB()
	},
	methods: {
		handleDevicesOpen() {
			this.$refs.devicesTree.open()
		},
		// 设备选择
		equipment(index) {
			uni.navigateTo({
				url: `/pages/shebei/index?type=${index}`
			})
		},
		stopRoll() { },
		checked(index) {
			this.clearFeedback()
			this.isActive = index
			this.submitFeedback()
		},
		Add(index) {
			if (index == 0) {
				uni.navigateTo({
					url: `/pages/control/listAdd/index`
				})
			} else {
				uni.navigateTo({
					url: `/pages/control/listAdd/indexCar`
				})
			}

		},
		clearFeedback() {
			this.formRecog = {
				monitorName: '',
				devicesTree: [],
				nodeList: [],
				groupIds: [],
				monitorTypes: '',
				monitorStatus: '',
			}
		},
		submitFeedback() {
			this.getPages(this.isActive)
			this.userFeedbackHidden = true;
		},
		showDiv() {
			this.userFeedbackHidden = false;
		},
		hideDiv() {
			this.userFeedbackHidden = true;
		},
		gotoPage(e, item) {
			if (e == 0) {
				// this.$tab.navigateTo('/pages/control/components/details?monitorId=' + item.monitorId)
				uni.navigateTo({
					url: `/pages/control/components/details?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			} else if (e == 1) {
				// this.$tab.navigateTo('/pages/control/components/clbkDetails?monitorId=' + item.monitorId)
				uni.navigateTo({
					url: `/pages/control/components/clbkDetails?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		},
		getPages(e) {
			this.pageIndex = 1
			this.pageSize = 10
			this.dataList = []
			//布控类型条件变更
			// if (this.formRecog.controlType == '') {
			// 	if (this.isActive == 0) {
			// 		this.formRecog.controlTypes = [1, 2, 6]
			// 	}
			// 	if (this.isActive == 1) {
			// 		this.formRecog.controlTypes = [7, 9]
			// 	}
			// } else {
			// 	this.formRecog.controlTypes = []
			// 	this.formRecog.controlTypes.push(this.formRecog.controlType)
			// }
			const filtered = Object.fromEntries(
				Object.entries({
					...this.formRecog,
					monitorTypes: null
				})
					.filter(([, v]) => v !== null && v !== '' && (!Array.isArray(v) || v.length))
			);
			const params = {
				pageSize: this.pageSize,
				currentPage: this.pageIndex,
				monitorTypes: this.formRecog.monitorTypes ? [Number(this.formRecog.monitorTypes)] : e == 0 ? [1, 2, 6] : [7, 17],
				...filtered
				// "nodeList": this.formRecog.nodeList,
				// "groupIds": this.formRecog.groupIds,
				// "monitorName": this.formRecog.monitorName,
				// "monitorStatus": this.formRecog.controlStatus,
				// "monitorType": this.formRecog.controlType,
				// "monitorTypes": this.formRecog.controlTypes,
			}
			getFace(params).then(res => {
				this.dataList = res.data.datas
				this.total = res.data.totalRows
			})
			// } else if (e == 1) {
			// 	// var params = {
			// 	// 	"pageSize": this.pageSize,
			// 	// 	"currentPage": this.pageIndex,
			// 	// 	"groupIds": this.formRecog.groupIds,
			// 	// 	"nodeList": this.formRecog.nodeList,
			// 	// 	"monitorName": this.formRecog.monitorName,
			// 	// 	"monitorStatus": this.formRecog.controlStatus,
			// 	// 	"monitorTypes": this.formRecog.controlTypes,
			// 	// }
			// 	// getCar(params).then(res => {
			// 	// 	this.dataList = res.data.datas
			// 	// 	this.total = res.data.totalRows
			// 	// })
			// 	var params = {
			// 		"pageSize": this.pageSize,
			// 		"currentPage": this.pageIndex,
			// 		"monitorTypes": [7, 17],
			// 	}
			// 	getFace(params).then(res => {
			// 		this.dataList = res.data.datas
			// 	})
			// }
		},
		changeControlType(e) {
			this.formRecog.monitorTypes = e.value
			// this.formRecog.controlType = e.value;
		},
		changeControlStatus(e) {
			this.formRecog.monitorStatus = e.value;
		},
		changeGroupIds(e) {
			var arr = e.detail.value
			if (arr != null && arr.length > 0) {
				this.formRecog.groupIds = [arr[0].value]
			} else {
				this.formRecog.groupIds = []
			}
		},
		// 人像库下拉框
		faceDB() {
			DBFace({
				isDelete: 1,
				queryMode: "self"
			}).then(res => {
				this.dataTree = res.data
			})
		},
		//车辆库下拉
		vehicleDB() {
			DBVehicle({
				isDelete: 1,
				queryMode: "self"
			}).then(res => {
				this.vehicleDataTree = res.data
			})
		},
		setDevides(id, labels) {
			this.formRecog.devicesTree = id
			this.nodeListCopy = labels || this.$t('search:pleaseSelect')
		}
	},
	onPullDownRefresh() {
		this.dataList = []
		setTimeout(() => {
			this.getPages(this.isActive)
		}, 1000)
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		if (this.total > this.pageIndex * this.pageIndex) {
			this.pageIndex = this.pageIndex + 1
			if (this.isActive == 0) {
				var params = {
					"pageSize": this.pageSize,
					"currentPage": this.pageIndex,
					"groupIds": this.formRecog.groupIds,
					"monitorName": this.formRecog.monitorName,
					"monitorStatus": this.formRecog.controlStatus,
					"monitorType": this.formRecog.controlType,
					"monitorTypes": this.formRecog.controlTypes,
				}
				getFace(params).then(res => {
					let data = res.data.datas
					if (data.length > 0) {
						for (var i = 0; i < data.length; i++) {
							this.dataList.push(data[i])
						}
					}
				})
			} else if (this.isActive == 1) {
				var params = {
					"pageSize": this.pageSize,
					"currentPage": this.pageIndex,
					"groupIds": this.formRecog.groupIds,
					"monitorName": this.formRecog.monitorName,
					"monitorStatus": this.formRecog.controlStatus,
					"monitorTypes": this.formRecog.controlTypes,
				}
				getCar(params).then(res => {
					let data = res.data.datas
					if (data.length > 0) {
						for (var i = 0; i < data.length; i++) {
							this.dataList.push(data[i])
						}
					}
				})
			}
		} else {
			uni.showToast({
				title: this.$t('warn:noMoreData'),
				icon: 'none',
				duration: 1000
			});
		}
	}
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

/* #endif */

.text {
	text-align: center;
	font-size: 26rpx;
	margin-top: 10rpx;
}


.tab_box {
	height: 44px;
	/* padding: 20rpx 0; */
	background-color: #3d5bff;
	display: flex;
	align-items: center;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 9;
}

.tab_nav {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #3f7df8;
	font-size: 28rpx;
	color: #fff;
	border-radius: 50rpx;
	width: 50%;
	margin: 0 auto;

}

.work-container {
	height: 100%;
}

.nav_item {
	margin-top: 44px;
}

.icon-search {
	position: absolute;
	right: 16rpx;
	top: 12px;
	color: #fff !important;
}

.tab_nav .navTitle {
	justify-content: center;
	align-items: center;
	opacity: .9;
	width: 205rpx;
	text-align: center;

}



.tab_nav .navTitle view {
	font-size: 28rpx;
}

.active {
	color: #2979ff;
	background-color: #fff;
	padding: 10rpx 0;
	text-align: center;
	border-radius: 50rpx;
	font-size: 28rpx;

}

/* 弹出框样式 */
.popup_overlay {
	position: fixed;
	top: 105rpx;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 5;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity=88);
}

.popup_content {
	position: fixed;
	top: 44px;
	left: 0;
	right: 0;
	width: 100%;
	background-color: white;
	z-index: 50;
	overflow: auto;
	padding: 30rpx;
}

.line {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
}

.popup_title {
	width: 32%;
	text-align: left;
	font-size: 32rpx;
	padding-right: 20rpx;
}

.popup_textarea_item {
	height: 70rpx;
	width: 68%;
	background-color: #F1F1F1;
	border-radius: 11rpx;
}

.popup_textarea {
	padding: 0 20rpx;
	font-size: 26rpx;
	height: 70rpx;
	line-height: 70rpx;
}

.btn {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup_button {
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	width: 200rpx;
	font-size: 32rpx;
}

/deep/ .uni-mask {
	top: 105rpx;
}

/deep/ .uni-column {
	height: 70rpx;
	line-height: 70rpx;
	padding: 0 20rpx;
}

/deep/ .uni-stat__select {
	height: 70rpx;
	line-height: 70rpx;
}

/deep/ .uni-select__input-text {
	width: 100% !important;
	font-size: 26rpx;
	color: grey;
}

/deep/ .uni-select {
	border: transparent;
	padding: 0 20rpx;
}

/deep/ .uniui-clear {
	font-size: 34rpx !important;
}

/* 表单样式 */
/deep/ .uni-forms-item {
	margin: 0;
	padding: 8px 0;
}

/deep/ .uni-forms-item__label {
	height: 70rpx;
	line-height: 70rpx;
}

/deep/ .uni-forms-item__content {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 26rpx;
	color: grey;
	background-color: #F1F1F1;
	border-radius: 4px;
}

/deep/ .placeholder {
	font-size: 26rpx;
}

/* 下拉框 */
/deep/ .input-value {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 26rpx;
	color: grey;
}

/deep/ .text-color {
	color: grey;
}


/deep/ .input-value-border {
	border: transparent;
}

.uni-picker-container .uni-picker-custom {
	top: 0;
}

/* 日期样式修改 */
/deep/ .uni-date {
	padding: 0 20rpx;

}

/deep/ .uni-date-editor {
	height: 70rpx;
	line-height: 70rpx;
}

/deep/ .uni-date-editor--x {
	height: 100%;
	border: transparent;
}

/deep/ .uni-date-x {
	padding: 0;
	background-color: transparent;
}

/* /deep/ .uni-date-editor--x .uni-date__icon-clear {
		padding: 0;
	} */
/deep/ .uni-date__x-input {
	font-size: 26rpx;
}

.btnAdd {
	width: 80rpx;
	height: 80rpx;
	background-color: #3d5bff;
	text-align: center;
	line-height: 80rpx;
	border-radius: 50%;
	position: fixed;
	top: 85vh;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 50;
}

.sbBox {
	width: 428rpx;
	line-height: 72rpx;
	padding: 0 10rpx 0 20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>